<template>
  <div class="product-select">
    <el-form
      :inline="true"
      :model="formInline"
    >
      <el-form-item label="">
        <el-input
          v-model="formInline.search"
          maxlength="20"
          placeholder="请输入优惠券名称"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="tableRef"
      :loading="loading"
      :data="tableData"
      max-height="240"
      border
      style="width: 100%"
      row-key="productId"
      @selection-change="selectionChange"
    >
      <el-table-column
        v-if="isMultiple"
        width="40"
        type="selection"
        :reserve-selection="true"
        fixed="left"
      />
      <el-table-column v-else label="" width="40" align="center">
        <template #default="scope">
          <el-radio v-model="radioId" :label="scope.row.shopCouponId" @change="radioChange"><i></i></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="shopCouponId" label="优惠券id" width="180" />
      <el-table-column prop="couponName" label="优惠券名称" width="180" />
      <el-table-column prop="couponType" label="类型" width="180">
        <template #default="scope">
          <span v-if="scope.row.couponType === 1">满减券</span>
          <span v-if="scope.row.couponType === 2">折扣券</span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="内容" />
      <el-table-column prop="effectiveStart" label="活动开始时间" />
      <el-table-column prop="effectiveEnd" label="活动结束时间" />
    </el-table>
    <el-pagination
      :current-page="formInline.page"
      :hide-on-single-page="true"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import Cookies from 'js-cookie'
import { getCoupons } from '@/api/public'
import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'

defineComponent({
  name: 'CouponSelect'
})
const props = defineProps({
  isMultiple: {
    type: Boolean,
    default: false,
  },
  proId: {
    type: Number,
    default: 0,
  },
  proIds: {
    type: Array,
    default: () => [],
  },
})
const { isMultiple, proId, proIds } = toRefs(props);

const emit = defineEmits(['couponChange'])

const loading = ref(false)
const formInline = ref({
  page: 1,
  pageSize: 10,
  shopId: null,
  search: ''
})
const total = ref(0)
const tableRef = ref();
const tableData = ref([]);
const tableRadio = ref(null);
const radioId = ref(null)
// 获取优惠券
function getTableData () {
  loading.value = true
  getCoupons(formInline.value).then(res => {
    tableData.value = res.data.list || []
    total.value = res.data.total
    afterInit()
  }).finally(() => {
    loading.value = false
  })
}
defineExpose({ getTableData, tableRadio })
function afterInit () {
  if (isMultiple.value) {
    if (proIds.value.length > 0) {
      tableData.value.forEach((row) => {
        for (let i = 0; i < proIds.value.length; i++) {
          if (proIds.value[i] === row.id) {
            tableRef.value.toggleRowSelection(row, true)
          }
        }
      })
    }
  } else {
    if (proId.value !== 0) {
      tableRadio.value = proId.value
    }
  }
}
// 搜索
function onSearch () {
  getTableData()
}
// 每页条数改变
function handleSizeChange (val) {
  formInline.value.pageSize = val
  getTableData()
}
// 当前页改变
function handleCurrentChange (val) {
  formInline.value.page = val
  getTableData()
}
function radioChange (val) {
  tableData.value.forEach(i => {
    if (i.shopCouponId === val) {
      tableRadio.value = i
    }
  })
}
// 多选改变
// let multipleSelection = ref([]);
function selectionChange (val) {
  // multipleSelection.value = val
  emit('couponChange', val)
}

watch(
  () => tableRadio.value,
  (val) => {
    emit('couponChange', val)
  }
)

onMounted(() => {
  formInline.value.shopId = parseInt(Cookies.get('cereShopId'))
  getTableData()
})
</script>

<style lang="scss" scoped>
.product-select {
  .el-pagination {
    padding: 0px;
    margin-top: 20px;
    text-align: right;
  }
  .el-table {
    margin-bottom: 20px;
    .img {
      width: 80px;
      height: 80px;
    }
    .el-radio {
      :deep(.el-radio__label) {
        display: none;
      }
    }
  }
}
</style>
